<template>
  <div>
    <div class="branchStoreModel">
      <!--面包屑-->
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>公司总部</el-breadcrumb-item>
          <el-breadcrumb-item
            ><a href="/branchStore3">分店信息</a></el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><a href="/branchStore4" class="branchStore"
              >柜台信息</a
            ></el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="handle-box">
          <el-form
            ref="form"
            :model="baseForm"
            label-width="80px"
            class="optionMenu"
          >
            <el-form-item label="选择总部">
              <el-select v-model="baseForm.region" placeholder="公司总部">
                <router-link to="/branchStore"
                  ><el-option
                    key="branchCompeny"
                    label="上海分公司"
                    value="branchCompeny"
                  ></el-option>
                </router-link>
              </el-select>
            </el-form-item>
          </el-form>

          <el-button
            type="primary"
            size="small"
            class="addBtn liner"
            @click="handleAdd"
            >添加总部</el-button
          >

          <el-button
            type="primary"
            size="small"
            class="search-input liner"
            @click="handleSearch"
            >搜索</el-button
          >
          <el-input
            placeholder="在此输入您要搜索的内容"
            class="handle-input mr10"
            v-model="search"
          ></el-input>
        </div>

        <!--table表格-->
        <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
          style="display: block"
        >
          <!-- <el-table-column
            prop="id"
            width="1"
            align="center"
            v-model="Id"
          ></el-table-column>-->

          <el-table-column label="序号" align="center" width="40">
            <template slot-scope="scope">{{
              (query.currentPage - 1) * query.pageSize + (scope.$index + 1)
            }}</template>
          </el-table-column>

          <el-table-column
            prop="coding"
            label="总部编码"
            width="60"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="name"
            label="总部名称"
            width="78"
          ></el-table-column>
          <el-table-column
            prop="area"
            label="区域"
            width="50"
          ></el-table-column>

          <el-table-column label="当前状态" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.state === 1 ? 'success' : 'danger'">{{
                scope.row.state === 1 ? "营业中" : "暂停营业"
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="contact"
            label="联系人"
            width="64"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="电话"
            width="65"
          ></el-table-column>
          <el-table-column prop="fax" label="传真" width="85"></el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="52"
          ></el-table-column>
          <el-table-column
            prop="city"
            label="城市"
            width="52"
          ></el-table-column>
          <el-table-column
            prop="town"
            label="区/镇"
            width="64"
          ></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>

          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <!--编辑按钮-->
              <el-button
                type="text"
                class="green"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <!--查看分店信息-->
              <router-link to="/branchStore3">
                <el-button type="text" class="blue">分店信息</el-button>
              </router-link>

              <!--删除按钮-->
              <el-button
                type="text"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!--页码-->
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.currentPage"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>

      <!-- 添加弹出框 -->
      <el-dialog title="添加总部信息" :visible.sync="addVisible" width="60%">
        <el-form ref="form" :model="addForm" label-width="70px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="总部编码">
                <el-input v-model="addForm.coding"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总部名称">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区域">
                <el-input v-model="addForm.area"></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="门店状态">
                <el-radio-group v-model="addForm.state" size="small">
                  <el-radio-button label="1">营业中</el-radio-button>
                  <el-radio-button label="0">暂停营业</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人">
                <el-input v-model="addForm.contact"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话">
                <el-input v-model="addForm.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="传真">
                <el-input v-model="addForm.fax"></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="省份">
                <el-input v-model="addForm.province"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市">
                <el-input v-model="addForm.city"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="区/镇">
                <el-input v-model="addForm.town"></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="地址">
                <el-input v-model="addForm.address"></el-input> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveAdd" class="liner" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 编辑弹出框 -->
      <el-dialog title="编辑总部信息" :visible.sync="editVisible" width="60%">
        <el-form ref="form" :model="editForm" label-width="70px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="总部编码">
                <el-input
                  v-model="editForm.coding"
                  class="headquartersCode"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="总部名称">
                <el-input
                  v-model="editForm.name"
                  readonly="readonly"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="区域">
                <el-input v-model="editForm.area"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="门店状态">
                <el-radio-group v-model="editForm.state" size="small">
                  <el-radio-button label="1">营业中</el-radio-button>
                  <el-radio-button label="0">暂停营业</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人">
                <el-input v-model="editForm.contact"></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="电话">
                <el-input v-model="editForm.phone"></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="传真">
                <el-input v-model="editForm.fax"></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="省份">
                <el-input v-model="editForm.province"></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="城市">
                <el-input v-model="editForm.city"></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="区/镇">
                <el-input v-model="editForm.town"></el-input> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="地址">
                <el-input v-model="editForm.address"></el-input> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveEdit" class="liner" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
var _index;
export default {
  name: "basetable",
  data() {
    return {
      query: {
        coding: "",
        name: "",
        state: "",
        currentPage: 1,
        pageSize: 8
      },
      Id: "",
      tableData: [],
      list: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      addVisible: false,
      /*选项框公司总部*/
      optionCompany: "",

      addLittle: {
        dobusiness: "营业中"
      },
      editLittle: {
        dobusiness: ""
      },
      addForm: {},
      editForm: {},
      search: "",
      searchList: [],
      pageTotal: 0,
      idx: -1, //代表当前第几行index
      // id: -1,
      baseForm: {
        region: "",
        date1: "",
        date2: "",
        delivery: true,
        type: ["公司总部"],
        resource: "上海分公司",
        desc: ""
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios
        .post(
          // "http://172.16.6.121:8080/gold/HeadQuarters/findAll",
          this.$api.branchStore.branchStoreTwofindAll,
          {
            currentPage: this.query.currentPage,
            pageSize: this.query.pageSize
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          if (res.data.code == "1" && res.data.success == true) {
            var result = res.data.data;
            this.tableData = result;
            this.pageTotal = res.data.data.length;
            console.log(res.data.data);
            console.log(res.data);
            console.log(res.data.data.list);
            console.log(this.tableData.length);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("数据获取失败");
          this.tableData = [];
          this.pageTotal = 0;
        });
    },

    /*点击搜索按钮时请求数据*/
    handleSearch() {
      if (this.search === "") {
        this.getData();
      } else {
        this.$axios
          .post(
            // "http://172.16.6.121:8080/gold/HeadQuarters/findName",
            this.$api.branchStore.branchStoreTwoName,
            {
              name: this.search,
              currentPage: this.query.currentPage,
              pageSize: this.query.pageSize
            },
            {
              headers: {
                "Content-Type": "application/json"
              }
            }
          )
          .then(res => {
            console.log(res.data.data);
            if (res.data.code == "1" && res.data.success == true) {
              this.tableData = res.data.data.list;
              this.pageTotal = res.data.data.list.length;
              // this.getData();
            }
          })
          .catch(err => {
            console.log(err);
            this.$message.error("搜索失败");
          });
        this.$set(this.query, "currentPage", 1);
      }
    },

    // 删除按钮(红色)
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row);
      /*删除框*/
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          // this.tableData.splice(index, 1);
          /*删除成功后请求数据*/
          this.$axios
            .post(
              // "http://172.16.6.121:8080/gold/HeadQuarters/delete/id/" + row.id
              this.$api.branchStore.branchStoreTwoDelete + "/" + row.id
            )
            .then(res => {
              console.log(res.data.data);
              console.log(res.data);
              if (res.data.code == "1" && res.data.success == true) {
                this.$message.success("删除成功");
                this.getData();
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error("删除失败");
            });
        })
        .catch(() => {});
    },

    /*编辑操作*/
    handleEdit(index, row) {
      console.log(row.state);
      this.idx = index;
      this.form = row;
      this.editForm.state = row.state == 1 ? "营业中" : "暂停营业";
      this.editVisible = true;
      this.editForm = Object.assign({}, row); // 重置对象
      _index = index;
      console.log("index的值：" + index);
      console.log("_index的值：" + _index);
      console.log("row的值是：", this.editForm); // 代表选择的这一行的数据
    },
    /*保存编辑*/
    saveEdit() {
      this.editVisible = false;
      console.log(this.editForm);
      this.$axios
        .post(
          // "http://172.16.6.121:8080/gold/HeadQuarters/update",
          this.$api.branchStore.branchStoreTwoUpdate,
          this.editForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          if (res.data.code == "1" && res.data.success == true) {
            this.$message.success("编辑成功");
            // this.tableData = res.data.data;
            // this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("编辑失败");
        });
      this.$set(this.tableData, this.idx, this.editForm);
      console.log("数据：" + this.editForm.date);
      console.log("对象数组", this.tableData);
    },

    //添加操作
    handleAdd() {
      this.addVisible = true;
      this.addForm = {
        coding: "",
        name: "",
        area: "",
        // state: "",
        // state: this.addForm.state === "营业中" ? 1 : 0, //失效
        state: "1",
        contact: "",
        phone: "",
        fax: "",
        province: "",
        city: "",
        town: "",
        address: ""
      };
    },

    //保存添加并请求数据
    saveAdd() {
      this.addVisible = false;
      console.log(this.addForm);
      /*保存并请求数据*/
      this.$axios
        .post(
          // "http://172.16.6.121:8080/gold/HeadQuarters/save",
          this.$api.branchStore.branchStoreTwoSave,
          this.addForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          console.log(res.data);
          if (res.data.code == "1" && res.data.success == true) {
            this.$message.success(`添加成功`);
            this.getData();
            // this.tableData = res.data.data.list;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("添加失败");
        });
    },

    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "currentPage", val);
      this.getData();
    }
  }
  /*computed比methods效率高，不需要重新渲染页面*/
};
</script>

<style scoped>
.branchStore {
  color: black !important;
  font-weight: bolder !important;
  cursor: pointer !important;
}
.branchStore:hover {
  color: dodgerblue !important;
}
.handle-box {
  margin-bottom: 20px;
}
.dropDown {
  margin-right: 10px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  position: relative;
  left: 10px;
  width: 300px;
  display: inline-block;
}
.optionMenu {
  width: 260px;
  float: left;
  margin-right: 10px;
}
.addBtn,
.search-input {
  margin-top: 4px;
}
.search-input,
.handle-input {
  float: right;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.green {
  color: green;
  margin-right: 5px;
}
.blue {
  color: dodgerblue;
  margin-right: 5px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.page {
  float: right;
  margin: 10px 0;
}
</style>
